<template>
	<view class="mask" @touchmove.prevent.stop="() => {}" @click.stop="handleclose" >
		<view class="content" @click.stop>
			<view class="container" @click.stop  >
				<view class="closeview" @click="handleclose">
					<uni-icons type="close" size="28"></uni-icons>
				</view>
				<!-- 头像部分 -->
				<view class="avatar-section">
					<image v-if="userInfo || userInfo.nicPic" class="avatar" :src="userInfo.nicPic" mode="aspectFill" />
				</view>
				<view class="info-section" v-if="isFriend(userInfo)">
					<text class="nickname" v-if="myFriend && myFriend.userSet" >{{ myFriend.userSet.customize_name?myFriend.userSet.customize_name :userInfo.nicName||'未设置昵称' }}</text>
					<view class="info-item">
						<text class="label">用户ID：</text>
						<text class="value">{{ userInfo.sendUserId }}</text>
					</view>
					<view class="info-item" v-if="userInfo.userTel">
						<text class="label">电话号码：</text>
						<text class="value">{{ userInfo.userTel }}</text>
					</view>
					<view class="info-item">
						<text class="label">备注名：</text>
						<input type="text" v-if="myFriend && myFriend.userSet" v-model="myFriend.userSet.customize_name" placeholder="输入备注名" />
					</view>
					<view class="action-buttons">
						<view class='btn' @click="handleDelFriend">
							<uni-icons type="trash-filled" size="30" color="#55557f"></uni-icons>
							<text>删除</text>
							</view>
						<view class="btn" @click="handleEditFriend" >
							<uni-icons type="compose" size="30" color="#55aaff"></uni-icons>
							<text>修改</text></view>
					
					
							<view class="btn" @click="handleSendMessage">
								<uni-icons type="chatboxes-filled" size="30" color="#55aa7f"></uni-icons>
								<text>聊天</text>
								</view>
					</view>
				</view>
				<!-- 用户信息部分 -->
				<view class="info-section" v-if="!isFriend(userInfo)">
					<text class="nickname">{{userInfo.nicName || '未设置昵称' }}</text>
					<view class="info-item">
						<text class="label">用户ID：</text>
						<text class="value">{{ userInfo.sendUserId }}</text>
					</view>
					<view class="info-item" v-if="userInfo.userTel">
						<text class="label">电话号码：</text>
						<text class="value">{{ userInfo.userTel }}</text>
					</view>
					<view class="info-item">
						<text class="label">备注名：</text>
						<input type="text" v-model="noteName"  placeholder="输入备注名" />
					</view>
					<view class="action-buttons">
						<view class="btn"  @click="handleAddFriend" :disabled="isFriend(userInfo)">
							<uni-icons type="personadd-filled" size="30" color="#55aaff"></uni-icons>
							加好友</view>
						<view class="btn" @click="handleSendMessage">
							<uni-icons type="chatboxes-filled" size="30" color="green"></uni-icons>
							<text >聊天</text>
							</view>
						
					</view>
				</view>
			</view>

			<!-- 功能按钮 -->
		</view>
	</view>
</template>

<script>
import { toTaget } from '../methods/toTarget';
import { addFriend, isFriend, deleteFriend, modifyFriend,getFriends } from '../utils/friends.js';

export default {
	name: 'addFriend',
	props: {
		// 用户信息
		userInfo: {
			type: Object,
			default: () => ({
				nicPic: '',
				sendUserId: '',
				nicName: '',
				userTel: ''
			})
		},
		isAddFriend: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			startY: 0,
			moveY: 0,
			noteName: '',
			myFriend:{}
		};
	},
async mounted(){
	// console.log('加朋友',this.userInfo)
	// if(isFriend(this.userInfo)){
	//  this.myFriend=await getFriends(this.userInfo)
	//  console.log("aaaa",this.myFriend.userSet)
	// }
    this.myFriend=this.userInfo
	 
 },
 
	methods: {
		isFriend,
		handleAddFriend() {
			addFriend(this.userInfo, this.noteName);
		},
		handleDelFriend(){
			deleteFriend(this.userInfo)
		},
		handleEditFriend(){
			modifyFriend(this.userInfo,this.myFriend.userSet.customize_name)
		},
	handleclose(){
		this.$emit('close')
	},


		handleSendMessage() {
			uni.navigateTo({
				url: `/pages/PrivateChat/PrivateChat?id=${this.userInfo.sendUserId}`
			});
			this.$emit('close');
		}
	}
};
</script>

<style lang="scss" scoped>
.mask {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	animation: maskIn 0.3s;
	z-index: 999;
background: linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0.5));

	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 3;
}
.closeview{
	position: absolute;
	top: 10rpx;
	right: 30rpx;
	width: 30rpx;
	height: 30rpx;
	border-radius: 15rpx;
}
.container {
	max-width: 600rpx;
	background-color: #fff;
	border-radius: 16rpx;
	padding: 40rpx;
	position: relative;
	z-index: 4;
}
@keyframes maskIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
@keyframes contentIn {
	from {
		transform: translateY(100%);
	}
	to {
		transform: translateY(0);
	}
}

.avatar-section {
	display: flex;
	justify-content: center;
	margin: 40rpx 0;
}

.avatar {
	width: 150rpx;
	height: 150rpx;
	border-radius: 50%;
	border: 2rpx solid #ddd;
}

.info-section {
	background-color: #fff;
	border-radius: 16rpx;
	padding: 30rpx;
	margin-bottom: 40rpx;
}

.nickname {
	display: block;
	font-size: 36rpx;
	font-weight: bold;
	text-align: center;
	margin-bottom: 30rpx;
}

.info-item {
	display: flex;
	align-items: center;
	margin: 20rpx 0;
	font-size: 28rpx;
}

.label {
	color: #666;
	min-width: 140rpx;
}

.value {
	color: #333;
}

.action-buttons {
	display: flex;
	margin-top: 50rpx;
	width: 100%;
	justify-content: space-evenly;
	gap: 30rpx;

}

.btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 120rpx;
	height: 120rpx;
	border-radius: 60rpx;
	font-size: 30rpx;
	background-color: #e0e0e0;
	color: #666;
	border: none;
}


.btn.disabled {
	background-color: #f0f0f0;
	color: #999;
}
</style>
